<template>
  <!-- 测试vue3.0生命周期 -->
  <div>
    <a href="/">点我回首页</a>
  </div>
</template>
<script>
// vue2.0 -> vue3.0
// beforeCreate ->	setup	组件创建之前
// created ->	setup	组件创建完成
// beforeMount ->	onBeforeMount	组件挂载之前
// mounted ->	onMounted	组件挂载完成
// beforeUpdate ->	onBeforeUpdate	数据更新，虚拟 DOM 打补丁之前
// updated ->	onUpdated	数据更新，虚拟 DOM 渲染完成
// beforeDestroy ->	onBeforeUnmount	组件销毁之前
// destroyed ->	onUnmounted	组件销毁后

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from "vue";
export default {
    setup(){
        onBeforeMount(()=>{
            console.log("组件挂载之前")
        })
        onMounted(()=>{
            console.log('组件挂载完成')
        })
        onBeforeUpdate(()=>{
            console.log('数据更新，虚拟DOM打补丁之前')
        })
        onUpdated(()=>{
            console.log('数据跟新，虚拟DOM渲染完成')
        })
        onBeforeUnmount(()=>{
            console.log('组件销毁前')
        })
        onUnmounted(()=>{
            console.log('组件销毁后')
        })
    }
};
</script>